<template>
  <div class="payments-container">
    <!-- head return-->
    <van-nav-bar title="付款方式" style="background: #ededed">
      <template #left>
        <van-icon name="arrow-left" size="24" color="black" @click="$router.push({ name: 'create' })" />
      </template>
    </van-nav-bar>

    <div class="payments-list">
      <div class="remaining-sum" @click="radio = '1'">
        <div class="list-box">
          <div class="logo-box">
            <Icon iconClass="balance" className="balance-icon"></Icon>
            <span>余额</span>
          </div>
          <div class="money-num">
            <span>${{ userAssets.balance }}</span>
            <van-radio-group v-model="radio">
              <van-radio name="1"></van-radio>
            </van-radio-group>
          </div>
        </div>
      </div>
      <div class="counter-box">
        <div class="list-box">
          <div class="logo-box">
            <Icon iconClass="guitai" className="guitai-icon"></Icon>
            <span>柜台结算</span>
          </div>
          <div>
            <van-radio-group v-model="radio">
              <van-radio name="2"></van-radio>
            </van-radio-group>
          </div>
        </div>
      </div>
      <div class="delivery-box">
        <div class="list-box">
          <div class="logo-box">
            <Icon iconClass="delivery" className="delivery-icon"></Icon>
            <span>外送到付</span>
          </div>
          <div>
            <van-radio-group v-model="radio">
              <van-radio name="3"></van-radio>
            </van-radio-group>
          </div>
        </div>
      </div>
      <div class="use-bankcard">
        <div class="card-box" v-for="(card, index) in userAssets.creditCard" :key="card.id">
          <div class="card-info">
            <Icon iconClass="cc-visa" className="visa-icon"></Icon>
            <span>{{ card.number | cardNumber }}</span>
            <span>有效期至 {{ card.cardDate }}</span>
          </div>
          <van-radio-group v-model="radio">
            <van-radio :name="4 + index"></van-radio>
          </van-radio-group>
        </div>
        <div class="addCard-btn">
          <van-button plain type="info" @click="goAddCard"
            >添加银行卡
            <van-icon name="arrow" />
          </van-button>
        </div>
      </div>
    </div>

    <!-- 提交订单按钮模块 -->
    <div class="pay-module">
      <div class="pay-box">
        <div class="number-box">
          <span class="sum-num">${{ submitOrderData.collectSum.totalAmount }}</span>
        </div>
        <div class="pay-button" @click="enterPayments">
          <span>确认付款</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Payments',
  data() {
    return {
      radio: '1'
    }
  },
  // 过滤信用卡号
  filters: {
    cardNumber(num) {
      return num.replace(/(?=[0-9]{0})(\d{12})/g, '****')
    }
  },
  computed: {
    ...mapState({
      submitOrderData: state => state.account.submitOrderData,
      userAssets: state => state.account.userAssets
    })
  },
  methods: {
    // <--- enter payment --->
    enterPayments() {
      this.$load.start()
      setTimeout(() => {
        this.$load.done()
        this.$router.push({ name: 'ispay' })
      }, 600)
    },
    goAddCard() {
      this.$load.start()
      this.$store.dispatch('getCountryList').then(msg => {
        if (msg) return this.$msg.danger(msg + 'country_err')
        this.$load.done()
        this.$router.push({ name: 'addcard', query: { source: 1 } })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.payments-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background-color: #ededed;
}

.van-nav-bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  z-index: 3;
}

/deep/.van-radio__icon--checked .van-icon {
  background: #ffbf05;
  border-color: #ffbf05;
}

.payments-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  width: 100%;
  padding-top: 46px;
  padding-bottom: 60px;
  background: #ededed;
  .remaining-sum,
  .counter-box,
  .delivery-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 97%;
    height: 50px;
    margin-bottom: 0.4em;
    border-radius: 9px;
    background: white;
    .list-box {
      display: flex;
      width: 90%;
      justify-content: space-between;
      .money-num {
        display: flex;
        align-items: center;
        span:nth-child(1) {
          color: #bfbfbf;
        }
      }
      .logo-box {
        display: flex;
        align-items: center;
        .balance-icon {
          font-size: 1.5em;
          margin-right: 0.3em;
        }
        .delivery-icon {
          font-size: 1.5em;
          margin-right: 0.3em;
        }
        .guitai-icon {
          font-size: 1.5em;
          margin-right: 0.3em;
        }
        span:nth-child(2) {
          color: #bfbfbf;
        }
      }
      /deep/.van-radio__icon--checked .van-icon {
        margin-left: 0.9em;
      }
      /deep/.van-icon-success {
        margin-left: 0.9em;
      }
    }
  }
  .use-bankcard {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 97%;
    border-radius: 9px;
    background: white;
    .card-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 90%;
      height: 50px;
      border-bottom: 0.06em solid #f0f0f0;
    }
    .addCard-btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 50px;
      /deep/.van-button--plain.van-button--info {
        display: flex;
        width: 100%;
        border: none;
        color: #ffbf05;
        padding-left: 1em;
        font-size: 1.1em;
        .van-icon-arrow {
          position: absolute;
          right: 0.9em;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
    .card-info {
      display: flex;
      align-items: center;
      color: #bfbfbf;
      .visa-icon {
        font-size: 2.1em;
        margin-right: 0.3em;
      }
      span:nth-child(2) {
        margin-right: 0.3em;
      }
      span:nth-child(3) {
        font-size: 0.6em;
      }
    }
  }
}
.pay-module {
  position: fixed;
  max-width: 640px;
  width: 100%;
  height: 46px;
  bottom: 0;
  z-index: 2;
  background: none;
  .pay-box {
    overflow: hidden;
    position: absolute;
    display: flex;
    flex-direction: initial;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    bottom: 0;
    background-color: #fafafa;
    .number-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 66%;
      height: 100%;
      .sum-num {
        font-size: 1.2em;
        margin-left: 15px;
        color: #666666;
        font-weight: 600;
      }
    }
    .pay-button {
      width: 34%;
      height: 100%;
      text-align: center;
      line-height: 46px;
      background-color: #ffbf05;
      color: white;
      font-size: 1.2em;
    }
  }
}
</style>
